<template>
  <div class="hello">
    {{ msg }}
    <div>
      <el-table
        :data="frontEndPageChange"
        stripe
      >
        <el-table-column prop="date" label="日期" width="100">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="100">
        </el-table-column>
        <el-table-column prop="address" label="地址" width="190">
        </el-table-column>

        <el-table-column label="个人信息" width="180" align="center">
          <el-table-column prop="age" label="年龄" align="center">
          </el-table-column>
          <el-table-column prop="height" label="身高" align="center">
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
        class="z-pagination"
        :current-page="paginationOptions.currentPage"
        :page-size="paginationOptions.pageSize"
        :page-sizes="paginationOptions.pageSizes"
        layout="sizes, prev, pager, next, jumper,total"
        :total="tableData.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
// 数据来源
import { tableData } from '@/util/options'
export default {
  name: 'frontEndPage',
  data() {
    return {
      msg: '前端分页',
      paginationOptions: {
        currentPage: 1, // 当前页
        pageSize: 10, // 展示页数
        pageSizes: [10, 20, 30, 40] // 可选择展示页数 数组
      },
      tableData
    }
  },
  computed: {
    // 计算属性对数据进行处理
    frontEndPageChange() {
      let start =
        (this.paginationOptions.currentPage - 1) *
        this.paginationOptions.pageSize
      if (start >= this.tableData.length) start = 0
      let end =
        this.paginationOptions.currentPage * this.paginationOptions.pageSize
      if (end >= this.tableData.length) end = this.tableData.length
      return this.tableData.slice(start, end)
    }
  },
  methods: {
    // 改变分页数量
    handleSizeChange(val) {
      this.paginationOptions.pageSize = val
    },
    // 改变当前页
    handlePageChange(val) {
      this.paginationOptions.currentPage = val
    }
  }
}
</script>
